<template>
  <div>
    <NavBar :isShowLeft="false">
      <template slot="left">
        <van-icon name="arrow-left" @click="handleBack" />
      </template>
      <template slot="content">
        <div>{{ productInfo.productName }}</div>
      </template>
    </NavBar>
    <Recording v-if="productInfo.productName" />
  </div>
</template>
<script>
import store from '@/store'
import NavBar from '@/components/h5header'
import Recording from '../components/h5Recording'
import { mapGetters, mapMutations, mapActions, mapState } from 'vuex'
import isAppBack from '@/mixin/isAppBack'
import API from '@/services/h5/product'
export default {
  mixins: [isAppBack],
  components: { NavBar, Recording },
  data() {
    return {}
  },
  computed: {
    ...mapGetters('product', ['productInfo']),
    ...mapState('product', ['contractId'])
  },
  created() {
    document.title = this.productInfo.productName
    setTimeout(() => {
      console.log(
        'dsfsdfsfsdsdfsf====================================',
        this.productInfo
      )
      document.title = this.productInfo.productName
    }, 1000)
  },
  mounted() {},
  methods: {
    ...mapMutations('product', ['initData', 'setProductInfo']),
    ...mapActions('product', ['getProductDetailInfo']),
    async init(item) {
      let res = await API.getProductInfo({
        productId: item.productId
      })
      if (res.data && res.data.code === 1000) {
        this.setProductInfo({
          productId: res.data.data.id,
          productName: res.data.data.productName
        })
      }
    },
    handleBack() {
      this.$dialog
        .confirm({
          title: '此页面信息未保存，确认离开页面吗'
        })
        .then(() => {
          this.judgeAppBack()
        })
        .catch(() => {})
    }
  },
  beforeRouteEnter(to, from, next) {
    const getProductInfoName = async () => {
      let res = await API.getProductInfo({
        productId: to.query.productId
      })
      if (res.data && res.data.code === 1000) {
        store.commit('product/setProductInfo', {
          productId: res.data.data.id,
          productName: res.data.data.productName
        })
        document.title = res.data.data.productName
      }
    }

    let initPath = [
      '/home',
      '/product',
      '/productOptimization',
      '/productDynamicsDetail'
    ]
    console.log('ccccccccccccccccccccccccccccccc----------------------------')

    if (to.query.productId) {
      localStorage.setItem('successBack', '/product?active=N')
    }
    if (to.query.contractId) {
      localStorage.setItem('successBack', '/myOrder')
    }

    if (from.path == '/' && to.query.productId) {
      getProductInfoName()
    }
    if (initPath.includes(from.path)) {
      store.commit('product/initData')
      getProductInfoName()
    } else {
      if (from.name !== '扫描页面') {
        store.dispatch('product/getProductDetailInfo', {
          contractId: to.query.contractId || store.state.product.contractId
        })
      }
    }
    next()

    // next(vm => {
    //   console.log('dsfssdfd----------------------------')
    //   if (to.query.productId) {
    //     localStorage.setItem('successBack', '/product?active=N')
    //   }
    //   if (to.query.contractId) {
    //     localStorage.setItem('successBack', '/myOrder')
    //   }
    //   if (from.path == '/' && to.query.productId) {
    //     vm.init(to.query)
    //   }
    //   if (initPath.includes(from.path)) {
    //     vm.initData()
    //     vm.init(to.query)
    //   } else {
    //     if (from.name !== '扫描页面') {
    //       vm.getProductDetailInfo({
    //         contractId: to.query.contractId || vm.contractId
    //       })
    //     }
    //   }
    // })
  }
}
</script>
